﻿<%@ page language="java" pageEncoding="UTF-8"
	errorPage="/ui/defaultException.jsp"%>
<%@include file="/ui/tags.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>编辑行程--禅境旅行</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <%@include file="/ui/portal/commonjscss.jsp"%>
   <link href="${cpath}/resources/portal/js/wizard/wizard_vertical.css" rel="stylesheet" type="text/css" />
   <link href="${cpath }/resources/portal/js/datetimepicker/jquery.datetimepicker.css" rel="stylesheet"	type="text/css" />
   <link href="${cpath }/resources/portal/js/artDialog/skins/aero.css" rel="stylesheet" />
</head>
<body>
    <div class="page">
        <%@include file="/ui/portal/head.jsp"%>
        <div id="container" class="container margin10">
            <div class="trip-area-title">只要花费三分钟时间，就可以制作自己的个性化旅行计划</div>
            <div class="trip-area-step">
                <div class="trip-area-step-prev">
                    <a href="${cpath }/trip/edit/sort?tid=${trip.tripId}">上一步</a>
                </div>
                <c:set value="4" var="step"></c:set>
				<%@include file="/ui/portal/trip/edit_steps.jsp"%>
                <div class="trip-area-step-next">
                    <a href="javascript:void(0)" id="saveTrip">保存</a>
                </div>
            </div>
            <div class=" clear1">
            </div>
            <div class="trip-step4-edit-button">
                <a class="btnedittrip" href="javascript:void(0)">编辑行程</a>
            </div>
            <div class="trip-step4-edit-topbg">
                 
            </div>
            <div class="trip-step4-editform">
                <div id="wizard" class="trip-step4-editform-left swMain">
                    <ul>
                        <li><a href="#step-trip">行程 ></a></li>
                        <li><a href="#step-flight" data-url="${cpath }/trip/edit/flight?tid=${trip.tripId}" data-cache="false">航班 ></a></li>
                        <c:forEach var="daily" items="${dailys }" varStatus="status">
                        <li><a href="#step-daily${status.count }" data-url="${cpath }/trip/edit/daily?tid=${trip.tripId}&did=${daily.dailyId}">第${status.count }天 ></a></li>
                        </c:forEach>
                    </ul>
                    <div id="step-trip" class="trip-step4-editform-right" style="display: none;">
                        <div class="trip-step4-editform-form">
                        	<form>
                            <div class="trip-step4-editform-form-row">
                                <div class="trip-step4-editform-form-name">行程名称：</div>
                                <div class="trip-step4-editform-form-input760">
                                    <input type="text" name="name" class="input760" data-type="range" data-tip="行程名称最多32个字符!"
					data-required="true" data-max="32" value="${trip.name }"/>
                                </div>
                            </div>
                            <div class="trip-step4-editform-form-row">
                                <div class="trip-step4-editform-form-name"> 出发城市：</div>
                                <div class=" trip-step4-editform-form-input230">
                                    <input type="text" name="departureCity" class="input230" data-type="range" value="${trip.departureCity }"
					data-tip="出发城市最多16个字符!"  data-max="16"/>
                                </div>
                                <div class="trip-step4-editform-form-name">出发日期：</div>
                                <div class=" trip-step4-editform-form-input230">
                                    <input type="text" name="departureTime" class="input230 trip-time" value="<fmt:formatDate value='${trip.departureDate }' pattern='yyyy/MM/dd HH:mm:ss'/>" 
				data-type="range" data-tip="请选择出发日期!"  />
                                </div>
                                <div class="trip-step4-editform-form-name">价 格：</div>
                                <div class=" trip-step4-editform-form-input110">
                                    <input type="text" name="price" class="input130" data-type="int" value="${trip.price }"
					data-tip="价格只能是数字，默认单位:元!" />
                                </div>
                            </div>
                            <div class="trip-step4-editform-form-row">
                                <div class="trip-step4-editform-form-name">预订URL：</div>
                                <div class="trip-step4-editform-form-input760">
                                    <input type="text" name="bookUrl" class="input760" value="${trip.bookUrl }"
					 data-type="range" data-tip="预订url最多128个字符!"
					 data-max="128"/>
                                </div>
                            </div>
                            <div class="trip-step4-editform-form-row">
                                <div class="trip-step4-editform-form-name">描 述：</div>
                                <div class="trip-step4-editform-form-input760">
                                    <textarea name="summary" class="textarea760130" data-type="range" data-tip="行程描述最多128个字符!"
						 data-max="128">${trip.summary }</textarea>
                                </div>
                            </div>
                            <div class="trip-step4-editform-form-row">
                                <div class="trip-step4-editform-form-name">封 面：</div>
                                
                                <div class="trip-step4-editform-form-input760">
                                    <div id="trip-step4-editform-form-viewimage" class="trip-step4-editform-form-viewimage">
                                        <div class="js-preview trip-step4-preview">
                                        	<c:if test="${!empty trip.image }">
                                        	 <img alt="" src="${image_domain }/${trip.image}" width="745" height="380"/>
                                        	</c:if>
                                        </div>
                                        <div class="trip-step4-btn trip-step4-btn-success js-fileapi-wrapper">
                                            <div class="js-browse">
                                                <span class="trip-step4-btn-txt">选择文件</span>
                                                <input name="filedata" type="file">
                                            </div>
                                            <div class="js-upload" style="display: none;">
                                                <div class="progress progress-success">
                                                    <div class="js-progress bar">
                                                    </div>
                                                </div>
                                                <span class="trip-step4-btn-txt">上传中..</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--  
                                <div class="trip-step4-editform-form-input760">
                                    <input type="text" value="" class="input560" />
                                    <input type="button" value="添加" class="btn6030" />
                                </div>
                                <div class="trip-step4-editform-form-viewimg">
                                    <img src="assets/1000500.jpg" />
                                </div>
                                -->
                            </div>
                            
                            <input type="hidden" name="tripId" value="${trip.tripId }"/>
                            <input type="hidden" name="days" value="${trip.days }"/>
                            <input type="hidden" name="distance" value="${trip.distance }"/>
                            <input type="hidden" name="image" value="${trip.image }"/>
                            <input type="hidden" name="status" value="${trip.status }" />
                           </form> 
                        </div>
                    </div>
                    <div id="step-flight">
                    </div>
                    <c:forEach var="daily" items="${dailys }" varStatus="status">
                    	<div id="step-daily${status.count }"></div>
                    </c:forEach>
                </div>
            </div>
            <div class=" clear1">
            </div>
        </div>
        <%@include file="/ui/portal/footer.jsp"%>
    </div>
</body>
</html>
	<script>
		window.FileAPI = {
			  debug: true // debug mode
			, staticPath: '${cpath}/resources/portal/js/upload/FileAPI/' // path to *.swf
		};
	</script>
	<script src="${cpath}/resources/portal/js/upload/FileAPI/FileAPI.min.js"></script>
	<script src="${cpath}/resources/portal/js/upload/FileAPI/FileAPI.exif.js"></script>
	<script src="${cpath}/resources/portal/js/upload/jquery.fileapi.min.js"></script>
<script src="${cpath}/resources/portal/js/wizard/jquery.wizard.js" type="text/javascript"></script>
<script src="${cpath }/resources/portal/js/validator/multiformvalidator.js" type="text/javascript"></script>
<script type="text/javascript" src="${cpath }/resources/portal/js/datetimepicker/jquery.datetimepicker.js"></script>
<script src="${cpath }/resources/portal/js/artDialog/jquery.artDialog.min.js"></script>
<script type="text/javascript">
	var options = {
			cpath:"${cpath}",
			trip:{
				upload:{
					uploadDiv:"#trip-step4-editform-form-viewimage",
					options:{url: '${cpath}/trip/saveimage',
						   accept: 'image/*',
						   data:{"tripId":"${trip.tripId}"},
						   imageSize: { minWidth: 235, minHeight: 180 },
						   elements: {
							  active: { show: '.js-upload', hide: '.js-browse' },
							  preview: {
								 el: '.js-preview',
								 width: 745,
								 height: 380
							  },
							  progress: '.js-progress'
						   },
						   autoUpload:true}
				},
				formdata:function(container){
					return $("form",container).serializeArray();
				},
				formurl:"${cpath }/trip/edit/base",
				datetime:".trip-time"
			},
			flight:{
				formdata:function(container){
					return $("form",container).serializeArray();
				},
				formurl:"${cpath }/trip/edit/flight",
				datetime:".flightDate",
				editbox:".editbox",
				createFlightView:function(no,c){
					var $flight = $(".flight_template",c).clone(true);
					$flight.removeClass("flight_template").addClass("trip-step4-editform-form");
					$(".trip-step4-editform-form-title",$flight).text("航班"+no);
					$flight.show();
					return $flight;
				},
				deleteurl:"${cpath }/trip/delete/flight"
			},
			daily:{
				upload:{
					uploadDiv:".trip-step4-editform-form-viewimage2",
					options:{
						url: '${cpath }/trip/save/location/image',
						accept: 'image/*',
						imageSize: { minWidth: 235, minHeight: 180 },
						   elements: {
							  active: { show: '.js-upload', hide: '.js-browse' },
							  preview: {
								 el: '.js-preview',
								 width: 180,
								 height: 130
							  },
							  progress: '.js-progress'
						   },
						   autoUpload:true
					}
				},
				formdata:function(container){
					return $("form",container).serializeArray();
				},
				formurl:"${cpath }/trip/edit/daily"
				
			}
	};
	var editor = new TripEditHelper(options);
    $(function () {
   	  function saveAndPreview(saveurl){
     	   var index = wizard.getCurIndex();
     	   var step = wizard.getCurStep();
     	   editor.valid(index,step,function(){
     		   window.location.href = saveurl ;
     	   });
       }
       var $preview = $("<a href='javascript:void(0)' class='buttonView'>预览</a>");
       $preview.click(function(){
    	   saveAndPreview("${cpath}/trip/edit/preview?tid=${trip.tripId}");
       });
       $("#saveTrip").click(function(){
    	   saveAndPreview("${cpath}/trip/edit/finish?tid=${trip.tripId}");
       });
       var wizard = $("#wizard").wizard({
    	   contentURL : '${cpath}/trip/test/default?tid=${tripId}',
    	   transitionEffect : 'slideleft',
    	   enableAllSteps:true,
    	   onLeaveBefore:function(index,$step,finish){
    		   //表单验证处理等
    		   return editor.valid(index,$step);
    	   },
    	   onLeaveAfter:function(index,$step){
    		   editor.destroy(index, $step);
    	   },
    	   onShow:function(index,$step){
    		   editor.init(index,$step,this);
    		   this.updateHeight();
    	   },
    	   onFinish:function(index,$step){
    		   editor.valid(index,$step,function(r){
    			   var href  = "${cpath}/trip/edit/finish?tid=${trip.tripId}";
    			   window.location.href = href ;
    		   });
    	   },
    	   buttons:[$preview]
       });
       
       //绑定行程预览的事件
       $(".btnedittrip").click(function(){
    	   saveAndPreview("${cpath}/trip/edit/preview?tid=${trip.tripId}");
       });
    });
    
    
</script>
